<template>
	<div class="box"
		style="padding: 0; margin: 0;background: linear-gradient(135deg,#a1ffce,#faffd1);overflow: hidden;">
		<ul class="guankaList" @click='goPlay'>
			<li id="80,1" style="background: linear-gradient(135deg,#42e695,#3bb2b8);">
				<h2 id="80,1">简单模式</h2>
				<p id="80,1">51张卡牌</p>
			</li>
			<li id="80,2" style="background: linear-gradient(135deg,#f09819,#edde5d)">
				<h2 id="80,2">一般模式</h2>
				<p id="80,2">51张卡牌 卡牌会被压住</p>
			</li>
			<li id="149,3" style="background:linear-gradient(135deg,#ff512f,#f09819);">
				<h2 id="149,3">困难模式</h2>
				<p id="149,3">卡牌增多，卡牌会被压住</p>
			</li>
			<li id="200,4" style="background:linear-gradient(135deg,#fdd819,#e80505)">
				<h2 id="200,4">炼狱模式</h2>
				<p id="200,4">更多卡牌，卡牌会被压住</p>
			</li>
			<li id="-1,5" style="background: linear-gradient(135deg,#870000,#190a05);">
				<h2 id="-1,5">无尽模式</h2>
				<p id="-1,5">无限卡牌，取之不绝</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},

		methods: {
			goPlay(e) {
				if(!e.target.id) return
				let splicArray = e.target.id.split(',')
				uni.navigateTo({
					url: `/subPackages1/pages/play/ylgy?number=${splicArray[0]}&type=${splicArray[1]}`
				})
			}
		},

	}
</script>

<style scoped>
	.box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.guankaList {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.guankaList li {
		width: 70%;
		height: 80px;
		background-color: aquamarine;
		border-radius: 10px;
		font-size: 30px;
		color: #fff;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		flex-direction: column;
	}

	.guankaList li p {
		font-size: 12px;
		margin-top: 5px;
	}
</style>